var app = {
	banner: function(obj, time) {
		var carousel = document.getElementById(obj);
		var carouselUl = carousel.querySelector('ul');
		var carouselLis = carouselUl.querySelectorAll('li');
		var points = carousel.querySelector('div');
		var screenWidth = document.documentElement.offsetWidth;
		var timer = null;

		for (var i = 0; i < carouselLis.length; i++) {
			var span = document.createElement('span');
			if (i == 0) {
				span.classList.add('active');
			}
			points.appendChild(span);
		}
		var left = carouselLis.length - 1;
		var center = 0;
		var right = 1;

		setTransform();

		timer = setInterval(showNext, time);

		var startX = 0;
		var startTime = null;
		carouselUl.addEventListener('touchstart', touchstartHandler);
		carouselUl.addEventListener('touchmove', touchmoveHandler);
		carouselUl.addEventListener('touchend', touchendHandeler);

		function showNext() {
			left = center;
			center = right;
			right++;
			if (right > carouselLis.length - 1) {
				right = 0;
			}
			setTransition(1, 1, 0);
			setTransform();
			setPoint();
		}

		function showPrev() {
			right = center;
			center = left;
			left--;
			if (left < 0) {
				left = carouselLis.length - 1;
			}
			setTransition(0, 1, 1);
			setTransform();
			setPoint();
		}

		function touchstartHandler(e) {
			clearInterval(timer);
			startTime = Date.now();
			startX = e.changedTouches[0].clientX;
		}

		function touchmoveHandler(e) {
			var dx = e.changedTouches[0].clientX - startX;
			setTransition(0, 0, 0);
			setTransform(dx);
		}

		function touchendHandeler(e) {
			var dx = e.changedTouches[0].clientX - startX;
			var dTime = Date.now() - startTime;
			if (Math.abs(dx) > screenWidth / 3 || (dTime < 300 && Math.abs(dx) > 30)) {
				if (dx > 0) {
					showPrev();
				} else {
					showNext();
				}
			} else {
				setTransition(1, 1, 1);
				setTransform();
			}

			clearInterval(timer);
			timer = setInterval(showNext, time);
		}

		function setTransition(a, b, c) {
			if (a) {
				carouselLis[left].style.transition = 'transform .3s';
			} else {
				carouselLis[left].style.transition = 'none';
			}
			if (b) {
				carouselLis[center].style.transition = 'transform .3s';
			} else {
				carouselLis[center].style.transition = 'none';
			}
			if (c) {
				carouselLis[right].style.transition = 'transform .3s';
			} else {
				carouselLis[right].style.transition = 'none';
			}
		}

		function setTransform(dx) {
			dx = dx || 0;
			carouselLis[left].style.transform = 'translateX(' + (-screenWidth + dx) + 'px)';
			carouselLis[center].style.transform = 'translateX(' + dx + 'px)';
			carouselLis[right].style.transform = 'translateX(' + (screenWidth + dx) + 'px)';
		}
		var pointsLis = points.querySelectorAll('span');

		function setPoint() {
			for (var i = 0; i < pointsLis.length; i++) {
				pointsLis[i].classList.remove('active');
			}
			pointsLis[center].classList.add('active');
		}
	},
	mockhot: function(url, success) {
		var xhr = new XMLHttpRequest();
		xhr.open('get', url, true);
		xhr.send()
		xhr.onreadystatechange = function() {
			if (this.readyState === 4) {
				if (this.status === 200) {
					success(this.responseText)
				}
			}
		}
	},
	pubu: function(number, url,pd) {
		app.mockhot(url, function(res) {
			var responseText = JSON.parse(res);
			var list = document.getElementById('list');
			var n = 0;

			function aCreate() {
				var box = document.createElement('li');
				var img = document.createElement('img');
				var tip =document.createElement('span');
				var pone = document.createElement('p');
				var ptwo = document.createElement('p');
				ptwo.classList.add('space-between')
				img.src = responseText.list[n].src;
				tip.textContent='户外必备外套（卖点）';
				tip.classList.add('tip')
				pone.textContent = responseText.list[n].title;
				ptwo.innerHTML = '<span>' + responseText.list[n].value + ' </span>'+pd;
				box.classList.add('hot-box');
				box.classList.add('moves');
				list.appendChild(box);
				box.appendChild(img);
				box.appendChild(tip)
				box.appendChild(pone);
				box.appendChild(ptwo);
				n++;
			}
			for (var i = 0; i < number; i++) {
				aCreate()
			}
			setTimeout(function() {
				setInterval(function() {
					// window.onscroll = function() {
					//获取当前页面的滚动条纵坐标
					var bodyScrollTop = document.documentElement.scrollTop || document.body.scrollTop;
					//获取页面总高度
					var max = document.body.offsetHeight - document.documentElement.clientHeight;
					// console.log(bodyScrollTop);
					// console.log(max);
					if (bodyScrollTop >= max) {
						for (var i = 0; i < number; i++) {
							aCreate()
						}
					}
					// }
				}, 1000)
			}, 1000)
		})
	}
}
